<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>合并发货 - WMS仓库管理系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
    <style type="text/css">
        .T-box {
            width: 400px;
            padding: 0 20px;
            text-align: left;
        }

        .T-box p {
            position: relative;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .T-box p span {
            display: inline-block;
            padding-right: 15px;
            text-align: right;
            width: 110px;
            line-height: 36px;
            font-size: 14px;
        }

        .T-box p input, .T-box p select {
            width: 160px;
            padding: 0 5px;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            border: 1px solid #d3d3d3;
            outline: none;
        }

        .T-box p i {
            padding: 0 10px;
            line-height: 36px;
            font-style: normal;
        }

        .T-box p b {
            display: inline-block;
            margin-left: 10px;
            cursor: pointer;
            width: 60px;
            height: 36px;
            line-height: 36px;
            background: #c33;
            color: #fff;
            text-align: center;
            font-size: 13px;
            font-weight: normal;
        }

        .T-result {
            margin-bottom: 0;
        }

        .T-result em {
            color: #c33;
            font-style: normal;
        }

        /* 新增css */

        .my-table .td-box {
            line-height: 28px;
            padding: 15px;
        }

        .my-table .order-box {
            padding: 15px;
            background: #eee;
            color: #666;
            display: flex;
            justify-content: space-between;
        }

        .my-table .td-box span {
            margin-left: 5px !important;
        }

        .my-table td {
            padding: 0 !important;
        }

        .flex-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .my-table .my-btn {
            width: 200px;
            background: #39c;
            font-size: 14px;
            text-align: center;
            justify-content: center;
            display: flex;
            padding: 5px;
            border-radius: 4px;
            color: #fff !important;
            margin: 10px 0;
        }

        .my-table .goods-info {
            border-bottom: 1px solid #eee;
            padding: 15px;
            width: 300px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-right: 1px solid #eee;
        }

        .my-table .goods-info:last-child {
            border-bottom: none
        }

        .my-table .goods-info img {
            display: inline-block;
            width: 30px;
            height: 30px;
            object-fit: contain;

        }

        .my-table .goods-info span {
            margin-left: 5px !important;
            color: #333;
        }

        .my-table .opt-btn-box {
            display: flex;
            padding: 30px;

        }

        .my-table .opt-btn-box .btn {
            width: 50px;
            background: #39c;
            border-radius: 3px;
            text-align: center;
            color: #fff;
            height: 26px;
            font-size: 12px;
            line-height: 26px;
            margin: 0 5px;
        }

        .my-table .opt-btn-box .danger {
            background: #e95d5d;
        }


    </style>
    <!-- start sp-wrapper -->
    <fieldset class="layui-elem-field">
        <legend>合并打单发货</legend>
        <div class="layui-field-box">


        </div>
    </fieldset>

    <link rel="stylesheet" href="/sb/stock.css"/>
    <div class="sp-wrapper">
        <div class="sp-table">
            <table class="my-table">
                <thead>
                <tr >
                    <th>收货信息/合并发货</th>
                    <th>商品</th>
                </tr>
                </thead>
                <tbody >
                <tr th:each="item:${list}">
                    <td>

                        <div class="td-box">
                            <p>
                                收件人：<span th:text="${item.contactPerson}"></span>
                            </p>
                            <p>
                                电话：<span th:text="${item.mobile}"></span>
                            </p>
                            <p>
                                <b th:text="${item.province}"></b>&nbsp;
                                <b th:text="${item.city}"></b>&nbsp;
                                <b th:text="${item.area}"></b>
                            </p>
                            <p>
                                收货地址：<span th:text="${item.address}"></span>
                            </p>
                            <a href="javascript:;" class="my-btn hebingdadan">
                                合并打单并发货
                            </a>
                        </div>

                    </td>
                    <td>
                        <!-- 订单1 -->
                        <div th:each="itt:${item.getOrderList()}">
                            <input type="hidden" th:value="${itt.id}" class="orderId" />
                            <div class="order-box">
                                <p>订单编号：<span th:text="${itt.order_num}"></span> </p>
                                <p><b th:text="${#dates.format(itt.orderTime * 1000,'yyyy-MM-dd HH:mm:ss')}"></b></p>
                            </div>
                            <div class="flex-box">
                                <div>
                                    <div class="goods-info" th:each="goods:${itt.items}">
                                        <div>
                                            <img th:src="${goods.productImgUrl}" alt=""><span th:text="${goods.specNumber}">456456456456</span>
                                            <p th:text="${goods.productMallName}">直播商品大反馈</p>
                                        </div>
                                        <div>x<span th:text="${goods.quantity}"></span></div>
                                    </div>


                                </div>

<!--                                <div>未发货</div>-->
                                <div class="opt-btn-box">
<!--                                    <div class="btn">-->
<!--                                        查看-->
<!--                                    </div>-->
                                    <div class="btn danger remove">移除</div>
                                </div>
                            </div>
                        </div>

                    </td>




                </tr>

                </tbody>
            </table>

            <div class="pages">

            </div>
        </div>
    </div>
    <script type="text/template" id="send-goods">
        <div class="T-box">
            <p><span>快递公司</span>
                <select id="send-company">
                    <option value="">请选择快递公司</option>
                    <option th:each="item:${company}" th:value="${item.getCode()}" th:text="${item.getName()}"></option>
                </select>
            </p>
            <p><span>快递单号</span><input type="text" name="express_code"/></p>
            <p class="T-result"><span>&nbsp;</span><em id="erro"></em></p>
        </div>
    </script>


    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript">


    </script>
    <!-- end sp-wrapper -->
    <script>
        layui.use(['laydate', 'layer'], function () {
            var laydate = layui.laydate;
            var layer = layui.layer;


            $(function () {
                //移除订单
                $(".remove").click(function () {
                    if(confirm("确定要从合并订单中移除该子订单吗")) {
                        $(this).parent().parent().parent().remove();
                    }
                })
                //合并打单
                $(".hebingdadan").click(function () {
                    var ids = [];
                    var trObj = $(this).parent().parent().parent();
                     console.log($(trObj).find('.orderId'));
                    $(trObj).find('.orderId').each(function () {
                        console.log($(this).val());
                        ids.push($(this).val());
                    })
                    console.log("要合并的订单ids："+JSON.stringify(ids));
                    console.log(ids.join());
                    layer.open({
                        type: 2,
                        title: '合并打单',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['940px', '90%'],
                        content: '/order/order_send_express_hebing?ids=' + ids.join() //iframe的url
                    });
                })


            });

            //弹出商品list
            $(".goods_list").click(function () {
                var id = $(this).attr("data-id");
                layer.open({
                    type: 2,
                    title: '订单商品列表',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['940px', '90%'],
                    content: '/order/order_goods_list?id=' + id //iframe的url
                });
            })

            //打印快递单弹窗
            $(".print_express").click(function () {
                var id = $(this).attr("data-id");
                // console.log(id);
                //iframe层
                layer.open({
                    type: 2,
                    title: '打印订单快递单',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['940px', '90%'],
                    content: '/order/order_send_express?id=' + id //iframe的url
                });
            })

            //打印发货单弹窗
            $(".print").click(function () {
                var id = $(this).attr("data-id");
                console.log(id);
                //iframe层

                layer.open({
                    type: 2,
                    title: '打印订单发货单',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['940px', '90%'],
                    content: '/order/order_send_invoice?id=' + id //iframe的url
                });
            })

            //订单出库（发货）弹窗
            $(".send").click(function () {
                var id = $(this).attr("data-id");
                console.log(id);
                //iframe层

                layer.open({
                    type: 2,
                    title: '订单出库（发货）',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['940px', '90%'],
                    content: '/order/order_send?id=' + id //iframe的url
                });
            })

            //更新需要打印的订单数据
            $("#updatePickedOrder").click(function () {
                // $.ajax
                $.ajax({
                    url: "/ajax_order/update_picked_order",
                    type: "POST",
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        alert("更新了" + res.data + "条数据");
                        window.location.reload();
                    }
                });
            });//结束更新


        });
    </script>
</div>
</body>
<html>
